@import '../../style/themes/index';
@import '../../style/mixins/overlay';
@import './mixin.less';
@modal-prefix-cls: ~'@{kd-prefix}-modal';

@confirm: confirm;
@warning: warning;
@error: error;

@modal-bg-type-set: {
  @confirm: @modal-color-ongoing;
  @warning: @modal-color-warning;
  @error: @modal-color-error;
};

@modal-footer-type-set: {
  @confirm: space-around;
  @warning: normal;
  @error: normal;
};

.@{modal-prefix-cls} {
  &-container {
    position: relative;
    z-index: @modal-z-index-dialog;

    &-show {
      animation: kdModalEffect calc(@transition-duration - 0.1s) @ease both;
    }

    &-hidden {
      display: none
    }
  }
  &-mask {
    .overlay(@modal-mask-color-background, 0);
  }
  // &-mask + &-container-box {

  // }
  &-has-container-box {
    position: fixed;
    left: 50%;
    top: 50%;
  }
  &-container-box {
    display: flex;
    width: 460px;
    height: 340px;
    flex-direction: column;
    background: #ffffff;
    box-shadow: @modal-shadow;
    border-radius: @modal-radius;
    outline: none;
    .@{modal-prefix-cls}-header {
      display: flex;
      justify-content: space-between;
      padding: @modal-header-sizing-padding-vertical @modal-header-sizing-padding-horizontal;
      align-items: center;
      height: @modal-header-sizing-height;
      flex-shrink: 0;
      .@{modal-prefix-cls}-title-container {
        display: flex;
        justify-content: center;
        align-items: center;
        .@{modal-prefix-cls}-title-icon {
          .modal-title-icon-type(@icon-circle-radiu);
          margin-right: @modal-title-icon-sizing-margin-right;
        }
        each(@modal-bg-type-set, {
          .modal-title-icon-bgcolor-type(@key, @value)
        });
        .@{modal-prefix-cls}-title {
          min-width: 72px;
          min-height: 27px;
          font-size: @modal-title-font-size;
          color: @modal-title-font-color;
          line-height: 27px;
        }
        &:active {
          cursor: auto;
        }
      }
      .@{modal-prefix-cls}-close-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: @modal-close-icon-size;
        color: @modal-close-icon-color-text;
        cursor: pointer;
        &:hover {
          color: @modal-theme-color-hover;
        }
        &:active {
          color: @modal-theme-color-active;
        }
      }
      &:active {
        cursor: move;
      }
    }

    .@{modal-prefix-cls}-body {
      display: block;
      flex-grow: 1;
      padding: @modal-body-sizing-padding;
      font-size: @modal-body-font-size;
      color: @modal-body-font-color;
    }
    .@{modal-prefix-cls}-footer {
      height: @modal-footer-sizing-height;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: @modal-footer-font-size;
      color: @modal-footer-font-color;
      flex-shrink: 0;
    }
    // each(@modal-footer-type-set, {
    //   .@{modal-prefix-cls}-@{key}-footer {
    //     justify-content: @value;
    //   }
    // });
  }

  &-margin-btn {
    margin-right: @modal-footer-button-spacing;
  }
}

.@{modal-prefix-cls}-showline {
  .@{modal-prefix-cls}-header {
    border-bottom: @modal-border-width solid @modal-border-color;
  }
  .@{modal-prefix-cls}-footer {
    border-top: @modal-border-width solid @modal-border-color;
  }
}